<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .big-box .box1 {
            margin-bottom: 20px;
        }
        
        .big-box .box1 span {
            margin-right: 60px;
        }
        
        .big-box .box1 input {
            width: 20px;
            height: 20px;
            text-align: center;
            margin-right: 40px;
        }
        
        .big-box .box1 button {
            width: 20px;
            height: 20px;
            line-height: 16px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="big-box">
        <div class="box1"><span>手机</span><span>￥4000</span><input type="text" value=0>
            <button class="add">+</button>
            <button class="sub">-</button>
        </div>
        <div class="box1"><span>电脑</span><span>￥8000</span><input type="text" value=0>
            <button class="add">+</button>
            <button class="sub">-</button>
        </div>
        <div class="box1"><span>平板</span><span>￥5000</span><input type="text" value=0>
            <button class="add">+</button>
            <button class="sub">-</button>
        </div>
        <div class="box1"><span>手表</span><span>￥2000</span><input type="text" value=0>
            <button class="add">+</button>
            <button class="sub">-</button>
        </div>
    </div>
    <div class="total">
        共选择<span class="totalNum">0</span>台 总计
        <span class="totalPrice">0</span>元
    </div>
    <script>
        let adds = document.querySelectorAll(".add")
        let subs = document.querySelectorAll(".sub")
        let inputs = document.querySelectorAll("input")
        let totalNum = document.querySelector(".totalNum")
        let totalPrice = document.querySelector(".totalPrice")
            // 点击加一
        adds.forEach(function(add, index) {
                add.addEventListener("click", function() {
                    let num = parseInt(inputs[index].value) + 1
                    console.log(num);
                    inputs[index].value = num
                        // 将数据装入到数组中
                    let arr = []
                    inputs.forEach(function(input, index) {
                        arr.push(parseInt(inputs[index].value))
                        let object = allCommodity(arr)
                        console.log(allCommodity(arr));
                        totalNum.textContent = object.totalNum
                        totalPrice.textContent = object.totalPrice
                    })
                })
            })
            // 点击减一
        subs.forEach(function(sub, index) {
                sub.addEventListener("click", function() {
                    let num = parseInt(inputs[index].value) - 1
                    console.log(num);
                    if (num < 0) {
                        return
                    }
                    inputs[index].value = num
                        // 将数据装入到数组中
                    let arr = []
                    inputs.forEach(function(input, index) {
                        arr.push(parseInt(inputs[index].value))
                        let object = allCommodity(arr)
                        console.log(allCommodity(arr));
                        totalNum.textContent = object.totalNum
                        totalPrice.textContent = object.totalPrice
                    })
                })

            })
            // 在input上输入数据,并且显示在页面上
        inputs.forEach(function(input, index) {
                input.addEventListener("input", function() {
                    console.log(this.value);
                    if (parseInt(inputs[index].value) <= 0 || isNaN(parseInt(inputs[index].value))) {
                        inputs[index].value = 0

                    }

                    let arr = []
                    inputs.forEach(function(input) {
                        arr.push(parseInt(input.value))
                    })
                    let obj = allCommodity(arr)
                    totalNum.textContent = obj.totalNum
                    totalPrice.textContent = obj.totalPrice
                })

            })
            // 定义一个函数计算一共有多少商品以及一共多少钱？
        let arr = []
        let unitPrice = [4000, 8000, 5000, 2000]

        function allCommodity(arr) {

            let totalNum = 0
            let totalPrice = 0
            arr.forEach(function(item, index) {
                totalNum += item
                totalPrice += unitPrice[index] * item
            })
            return {
                totalPrice: totalPrice,
                totalNum: totalNum
            }
        }
    </script>


</body>

</html>